<!--
    group: 发票管理
    name: 退票详情
    item: 申请退票弹层
-->
<template>
  <div>
    <a-modal
      :width="800"
      :footer="null"
      :destroyOnClose="true"
      :maskClosable="false"
      v-model="isRefundShow"
      @cancel="cancleTicket"
    >
      <div class="main">
        <h4>请填写作废/冲红信息</h4>
        <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <a-form-model-item label="请填写作废/冲红说明" prop="taxRemark">
            <a-textarea v-model="form.taxRemark" placeholder="请填写退票说明（字数不超过500字）" :maxLength="500" :rows="3" allow-clear />
          </a-form-model-item>
          <a-form-model-item v-if="remarkIcon" label="请填写发票信息" required>
            <div class="invoice_items">
              <a-input v-model="form.taxList[0].taxNumber" placeholder="发票号码" style="width: 240px;" />
              <a-input v-model="form.taxList[0].taxMoney" disabled="disabled" placeholder="开票金额" />&nbsp;元
            </div>
          </a-form-model-item>
          <a-form-model-item v-if="!remarkIcon" label="请填写发票信息" required>
            <div class="invoice_left">
              <div v-for="(item,index) in form.taxList" class="invoice_content">
                <div class="invoice_items">
<!--                  <a-input-number v-model="item.taxCode" placeholder="发票代码" />-->
<!--                  <a-input-number v-model="item.taxNumber" placeholder="发票号码" />-->
                  <a-input v-model="item.taxCode" placeholder="发票代码" />
                  <a-input v-model="item.taxNumber" placeholder="发票号码" />
                  <!--ticketType 1 传统  2 数电    数电票不限制金额-->
                  <a-input-number v-model="item.taxMoney" placeholder="开票金额" :formatter="limitNumber" :parser="limitNumber" :max="ticketType == 2 ? 100000000000000000 : 99999.99" />&nbsp;元
                </div>

                <a-button
                  type="link" icon="minus"
                  style="color: #cc0000;margin-top: 5px;"
                  v-if="index != 0"
                  @click="deleteRateFun(index)"
                >删除</a-button>
              </div>
              <a @click="addInvioce"><a-icon type="plus" />添加一张</a>
            </div>
          </a-form-model-item>
        </a-form-model>
        <div class="footer_btns">
          <a-button type="primary" @click="sure">确定退票</a-button>
          <a-button class="mLeft" type="default" @click="cancleTicket">取消</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getInvoiceReturn } from '@api/invoiceAdminister'
import { limitDigits,cloneObject,conversionBranch,conversionElement } from '@/utils/util'
export default {
  name: "refundTicketLayer",
  props: ['isRefundShow','billUseNum','id','amount','ticketType'],
  data(){
    return{
      remarkIcon: false,  //区分开灵与历史票(TODO 获取接口查询当前票是否支持编辑金额)
      form: {
        taxRemark: null,   //退票说明
        taxList: [
          {
            taxCode: null,  //发票代码
            taxNumber: null,  //发票号码
            taxMoney: null   //发票金额
          }
        ]
      },
      rules: {
        taxRemark: [{ required: true, message: '请填写退票说明', trigger: 'blur' },],
      },
    }
  },
  created() {
    if(this.remarkIcon){
      this.form.taxList[0].taxMoney = conversionElement(this.amount);
    }
  },
  watch: {

  },
  computed:{
    returnTotal:function(){
      return this.form.taxList.reduce((prev,item) =>{
        return item.taxMoney + prev;
      },0)
    },
  },
  methods:{
    //添加一张
    addInvioce(){
      //ticketType 1 传统  2 数电    数电票不限制张数
      if (this.ticketType == 2){
        let data = {
          taxCode: null,  //发票代码
          taxNumber: null,  //发票号码
          taxMoney: null   //发票金额
        };
        this.form.taxList.push(data);
      }else{
        if (this.form.taxList.length >= this.billUseNum){
          this.$message.warning('添加张数不允许超过开票张数');
        }else {
          let data = {
            taxCode: null,  //发票代码
            taxNumber: null,  //发票号码
            taxMoney: null   //发票金额
          };
          this.form.taxList.push(data);
        }
      }
    },
    //删除
    deleteRateFun(index){
      this.form.taxList.splice(index, 1);
    },
    //校验发票信息不能为空
    verificationContent(){
      if (this.form.taxList && this.form.taxList.length > 0){
        if (!this.form.taxList[0].taxCode){
          this.$message.warning('发票代码不能为空');
          return false;
        }
        if (!this.form.taxList[0].taxNumber){
          this.$message.warning('发票号码不能为空');
          return false;
        }
        if (!this.form.taxList[0].taxMoney){
          this.$message.warning('发票金额不能为空');
          return false;
        }

        if (this.form.taxList[0].taxCode && this.form.taxList[0].taxNumber && this.form.taxList[0].taxMoney){
          return true;
        }
      }else {
        this.$message.warning('请填写发票信息');
        return false;
      }
    },
    //校验发票信息不能为空
    verificationInvoiceContent(){
      if (this.form.taxList && this.form.taxList.length > 0){
        if (!this.form.taxList[0].taxNumber){
          this.$message.warning('发票号码不能为空');
          return false;
        }

        if (this.form.taxList[0].taxNumber && this.form.taxList[0].taxMoney){
          return true;
        }
      }else {
        this.$message.warning('请填写发票信息');
        return false;
      }
    },
    //处理提交参数
    getParamData() {
      let data = cloneObject(this.form);
      if (data.taxList.length > 0){
        for (const key in data.taxList) {
          data.taxList[key].taxMoney = conversionBranch(data.taxList[key].taxMoney);
        }
      }
      return data;
    },
    //确认退票
    sure(){
      //开灵的票校验发票号码
      let taxContentStatus = this.remarkIcon ? this.verificationInvoiceContent() : this.verificationContent();
      this.$refs.form.validate(valid => {
        //验证开票内容必传
        let tempvalid = valid;
        if (!taxContentStatus){
          tempvalid = false;
        }else{
          tempvalid = true;
        }
        if (tempvalid){
          let params = {};
          params.taxId = this.id;
          params.returnTax = this.getParamData();
          //累计金额不超过当前发票开票金额
          let returnTotal = conversionBranch(this.returnTotal);
          if (returnTotal <= this.amount){
            getInvoiceReturn(params).then(res => {
              if (res.success) {
                if (res.result){
                  this.$message.success('退票申请已提交');
                  this.cancleTicket();
                }
              }else{
                this.$message.warning(res.message);
              }
            })
          }else{
            this.$message.warning('累计金额不超过当前发票开票金额');
          }
        }else {
          return false;
        }
      })
    },
    //弹层关闭
    cancleTicket(){
      this.$emit('handleFather');
      this.form = {
        taxRemark: null,   //退票说明
        taxList: [
          {
            taxCode: null,  //发票代码
            taxNumber: null,  //发票号码
            taxMoney: null   //发票金额
          }
        ]
      };
    },
    //正则替换小数点
    limitNumber(value){
      return limitDigits(value);
    },
  }
}
</script>

<style scoped lang="less">
//申请退票
h3,h4{
  font-weight: bolder;
}
h4{
  font-size: 18px;
  margin-bottom: 20px;
}
.invoice_left{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.invoice_content {
  width: 100%;
  display: flex;
  //align-items: center;
}
.invoice_items{
  display: flex;
  //flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  .ant-input{
    width: 160px;
    margin-right: 10px;
  }
  .ant-input-number{
    width: 160px;
    margin-right: 10px;
    /deep/.ant-input-number-handler-wrap{
      display: none;//去掉右边部分
    }
  }
}
.footer_btns{
  margin-top: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
